<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>统一地图平台</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <style>
        html,
        body,
        #mapui {
            margin: 0 auto;
            width: 100%;
            height: 100%
        }

        html,
        body {
            margin: 0;
            overflow: hidden;
            background: #fff;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
        }
    </style>

</head>

<body>
    <div id="mapui"></div>

    <script src="./js_example/script/map.min.js"></script>
    
    <script src="./js_example/script/demo.js"></script>

    <script>
        var chart, div, popup = '';
        var resources = {
            "text_class": "类目",
            "text_commodity": "商品",
            "text_commoditySales": "商品销量",
            "text_commodityClass": "商品类目",
            "text_beijingCommoditySales": "北京市商品销量",
        }
        var option = null;
        var amap = null;
        var that = this;

        var categoryDataMap = {
            "北京市": [
                { value: 335, name: resources.text_class + 'A' },
                { value: 679, name: resources.text_class + 'B' },
                { value: 1299, name: resources.text_class + 'C' }
            ],
            "广州市": [
                { value: 117, name: resources.text_class + 'A' },
                { value: 1267, name: resources.text_class + 'B' },
                { value: 1048, name: resources.text_class + 'C' }
            ], "上海市": [
                { value: 475, name: resources.text_class + 'A' },
                { value: 1450, name: resources.text_class + 'B' },
                { value: 875, name: resources.text_class + 'C' }
            ]
        };
        var dataMap = {
            "北京市": [
                { value: 335, name: resources.text_commodity + 'A' },
                { value: 310, name: resources.text_commodity + 'B' },
                { value: 234, name: resources.text_commodity + 'C' },
                { value: 135, name: resources.text_commodity + 'D' },
                { value: 1048, name: resources.text_commodity + 'E' },
                { value: 251, name: resources.text_commodity + 'F' }
            ],
            "广州市": [
                { value: 117, name: resources.text_commodity + 'A' },
                { value: 284, name: resources.text_commodity + 'B' },
                { value: 768, name: resources.text_commodity + 'C' },
                { value: 215, name: resources.text_commodity + 'D' },
                { value: 901, name: resources.text_commodity + 'E' },
                { value: 148, name: resources.text_commodity + 'F' }
            ], "上海市": [
                { value: 475, name: resources.text_commodity + 'A' },
                { value: 29, name: resources.text_commodity + 'B' },
                { value: 430, name: resources.text_commodity + 'C' },
                { value: 981, name: resources.text_commodity + 'D' },
                { value: 732, name: resources.text_commodity + 'E' },
                { value: 143, name: resources.text_commodity + 'F' }
            ]
        };

        var option = {
            title: {
                text: resources.text_beijingCommoditySales,
                subtext: resources.text_fictitiouData,
                textStyle: {
                    color: '#fff',
                    fontSize: 16
                }
            },
            backgroundColor: '#404a59',
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'right',
                y: 'bottom',
                textStyle: {
                    color: '#fff',
                    fontSize: 12
                },
                data: [resources.text_commodity + 'A', resources.text_commodity + 'B', resources.text_commodity + 'C', resources.text_commodity + 'D', resources.text_commodity + 'E', resources.text_commodity + 'F']
            },
            series: [
                {
                    name: resources.text_commodityClass,
                    type: 'pie',
                    selectedMode: 'single',
                    radius: [0, '30%'],

                    label: {
                        normal: {
                            position: 'inner'
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: categoryDataMap['北京市']
                },
                {
                    name: resources.text_commodity,
                    type: 'pie',
                    radius: ['40%', '55%'],
                    data: dataMap['北京市']
                }
            ]
        };

        div = document.createElement('div');



        map.Factory.create('mapui', {
            style: style,
            center: [116.402, 39.905],
            fullExtent: {
                xmin: 90.992204,
                ymin: 10.979711,
                xmax: 120.5338915,
                ymax: 50.543712
            },
            zoom: 3.5,
            projection: 'EPSG:4326',
            strategy: ['mapboxgl', 'openlayers']
        }, (o) => {
            amap = o;
            map.Factory.loadSpecialMap('echarts', () => {
                that.init(amap.pmap);
            })
        });


        function init(map) {
            chart = echarts.init(div, '', {
                width: 650,
                height: 400
            });
            chart.setOption(option);
            map.loadImage('./js_thematic_map_example/images/marker-icon.png', function (error, image) {
                if (error) throw error;
                map.addImage('positionPoint', image);
            });
            this.query(map);
        }

        function query(map) {
            var recordsets = [{ "datasetName": "China_ProCenCity_pt@China", "features": { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { "SmID": "16", "SmX": "1.2607962173437864E7", "SmY": "2647870.7767329095", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "12026156", "CLASS": "AD", "NAME": "广州市", "PINYIN": "Guangzhou Shi", "GNID": "440100", "XZNAME": "", "Field_SmGeoPosition": "-1" }, "geometry": { "type": "Point", "coordinates": [113.25925122000014, 23.13101816432765] }, "id": 16 }, { "type": "Feature", "properties": { "SmID": "31", "SmX": "1.3521945890529728E7", "SmY": "3663107.71662176", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "12026456", "CLASS": "AB", "NAME": "上海市", "PINYIN": "Shanghai Shi", "GNID": "310000", "XZNAME": "", "Field_SmGeoPosition": "2652824" }, "geometry": { "type": "Point", "coordinates": [121.46970664500009, 31.23347603917659] }, "id": 31 }] }, "fieldCaptions": ["SmID", "SmX", "SmY", "SmLibTileID", "SmUserID", "SmGeometrySize", "SmGeoPosition", "CLASS", "NAME", "PINYIN", "GNID", "XZNAME", "SmGeoPosition"], "fieldTypes": ["INT32", "DOUBLE", "DOUBLE", "INT32", "INT32", "INT32", "INT64", "WTEXT", "WTEXT", "WTEXT", "WTEXT", "WTEXT", "INT64"], "fields": ["SmID", "SmX", "SmY", "SmLibTileID", "SmUserID", "SmGeometrySize", "SmGeoPosition", "CLASS", "NAME", "PINYIN", "GNID", "XZNAME", "Field_SmGeoPosition"] }, { "datasetName": "China_Capital_pt@China", "features": { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { "SmID": "1", "SmX": "1.2957801616844445E7", "SmY": "4852151.575504352", "SmLibTileID": "1", "SmUserID": "0", "SmGeometrySize": "20", "SmGeoPosition": "11894784", "CLASS": "AB", "NAME": "北京市", "PINYIN": "Beijing Shi", "GNID": "110000", "XZNAME": "", "Field_SmGeoPosition": "-1" }, "geometry": { "type": "Point", "coordinates": [116.40191241000012, 39.905033414083526] }, "id": 1 }] }, "fieldCaptions": ["SmID", "SmX", "SmY", "SmLibTileID", "SmUserID", "SmGeometrySize", "SmGeoPosition", "CLASS", "NAME", "PINYIN", "GNID", "XZNAME", "SmGeoPosition"], "fieldTypes": ["INT32", "DOUBLE", "DOUBLE", "INT32", "INT32", "INT32", "INT64", "WTEXT", "WTEXT", "WTEXT", "WTEXT", "WTEXT", "INT64"], "fields": ["SmID", "SmX", "SmY", "SmLibTileID", "SmUserID", "SmGeometrySize", "SmGeoPosition", "CLASS", "NAME", "PINYIN", "GNID", "XZNAME", "Field_SmGeoPosition"] }]
            features = recordsets && recordsets[0] && recordsets[0].features;
            var featureCollection = features.features;
            var feature = recordsets[1].features.features;
            featureCollection.push(feature[0]);

            var fs = {
                features: featureCollection,
                type: "FeatureCollection"
            };
            map.addLayer({
                "id": "points",
                "type": "symbol",
                "layout": {
                    "icon-image": "positionPoint",
                    "icon-size": 0.8,
                    "icon-offset": [0, -15] //设置偏移量
                },
                "source": {
                    "type": "geojson",
                    "data": fs
                }
            });

            map.on('click', 'points', function (e) {
                popup = new mapboxgl.Popup({ maxWidth: 'none' });
                popup.setLngLat(e.lngLat.toArray())
                    .setDOMContent(div) // sets a popup on this marker
                    .addTo(map);

                var city = e.features[0].properties.NAME;
                chart.setOption({
                    title: {
                        text: city + resources.text_commoditySales
                    },
                    series: [
                        {
                            name: resources.text_commodityClass,
                            data: categoryDataMap[city]
                        },
                        {
                            name: resources.text_commodity,
                            data: dataMap[city]
                        }
                    ]
                });
            });
        }

    </script>
</body>

</html>